import React, { PureComponent } from 'react';
import { Icon, Modal, Button, message } from 'antd';

import styles from './BigImageDisplayer.less';
let src = null;
// let index = null
// let fileList = null

export default class BigImageDisplayer extends React.Component {
  state = {
    index: 0,
    previewVisible: false,
    fileList: [],
    imageRotateDeg: 0,
    width: 0,
    height: 0,
  };

  componentDidMount() {
    this.setState({
      index: this.props.itemIndex ? this.props.itemIndex : 0,
      fileList: this.props.fileList ? this.props.fileList : [],
    });
  }

  handleClickPreview = () => {
    this.setState({
      previewVisible: true,
      imageRotateDeg: 0,
    });
  };

  handleRotate = () => {
    this.setState({
      imageRotateDeg: this.state.imageRotateDeg + 90,
    });
  };

  handleClickDelete = () => {
    // message.warn('您点击了删除');
    this.props.onDelete && this.props.onDelete(this.props.file);
  };

  handleCancel = () => {
    this.setState({ previewVisible: false });
  };

  handleNextPage = () => {
    if (this.state.index < this.props.fileList.length - 1) {
      this.setState({
        index: this.state.index + 1,
        imageRotateDeg: 0,
      });
    } else {
      // this.setState({
      //   index: 0,
      //   imageRotateDeg: 0
      // })
      message.warning('已经最后一张了');
    }
  };

  handleOnePiece = () => {
    if (this.state.index > 0) {
      this.setState({
        index: this.state.index - 1,
        imageRotateDeg: 0,
      });
    } else {
      // this.setState({
      //   index: this.props.fileList.length - 1,
      //   imageRotateDeg: 0
      // })
      message.warning('已经第一张了');
    }
  };

  render() {
    const { previewVisible, index, fileList, width, height } = this.state;
    // const fileListIndex = this.props.fileListIndex;
    const size = this.props.size ? this.props.size : 'normal';
    const fileListAssets = this.props.fileList;

    if (this.props.src) {
      src = this.props.src;
    } else if (this.props.file) {
      src = this.props.file.url;
    }

    return (
      <div>
        {size == 'small' ? (
          <div className={styles.imageContainer1}>
            <div className={styles.imageBox1}>
              <div className={styles.imageFile1}>
                <div />
                <img src={src} size={size} />
                <div />
              </div>

              <div className={styles.imageActions1}>
                <Icon size={size} type="eye-o" onClick={this.handleClickPreview} />
                {this.props.showDeleteIcon && (
                  <Icon
                    style={{ marginLeft: '10px' }}
                    size={size}
                    type="delete"
                    onClick={this.handleClickDelete}
                  />
                )}
              </div>
            </div>
          </div>
        ) : (
          <div className={styles.imageContainer}>
            <div className={styles.imageBox}>
              <div className={styles.imageFile}>
                <div />
                <img src={src} size={size} />
                <div />
              </div>

              <div className={styles.imageActions}>
                <Icon size={size} type="eye-o" onClick={this.handleClickPreview} />
                {this.props.showDeleteIcon && (
                  <Icon
                    style={{ marginLeft: '10px' }}
                    size={size}
                    type="delete"
                    onClick={this.handleClickDelete}
                  />
                )}
              </div>
            </div>
          </div>
        )}
        <Modal
          visible={previewVisible}
          footer={null}
          onCancel={this.handleCancel}
          width={'800px'}
          bodyStyle={{
            backgroundColor: '#595959',
            opacity: 1,
            alignItems: 'center',
            padding: 0,
            marginTop: '30px',
          }}
        >
          <div style={{ display: 'flex', alignItems: 'center' }}>
            {/* {console.log("fileList",fileList)} */}
            <img
              className={styles.imageInModal}
              style={{
                width: '100%',
                height: '100%',
                transform: `rotate(${this.state.imageRotateDeg}deg)`,
                backgroundColor: '#595959', //'rgba(89, 89, 89, 0.65)'
              }}
              src={fileListAssets[index].url} //fileListAssets.length > 0 ? fileListAssets[index].url :
              onLoad={e => {
                this.setState({ width: e.target.width, height: e.target.height });
              }}
            />
          </div>
          <div style={{ textAlign: 'center' }}>
            <Button onClick={this.handleOnePiece} style={{ marginRight: '10px' }}>
              上一张
            </Button>
            <Button onClick={this.handleRotate}>旋转</Button>
            <Button onClick={this.handleNextPage} style={{ marginLeft: '10px' }}>
              下一张
            </Button>
          </div>
        </Modal>
      </div>
    );
  }
}
